<!doctype html>
<html class="no-js" lang="zxx" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>时尚衣橱购物商城</title>
  <meta name="description" content="Default Description">
  <meta name="keywords" content="E-commerce" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- place favicon.ico in the root directory -->
  <link rel="shortcut icon" type="image/x-icon" href="img/icon/favicon.png">
  <!-- Google Font css -->
  <link href="https://fonts.googleapis.com/css?family=Lily+Script+One" rel="stylesheet">

  <!-- mobile menu css -->
  <link rel="stylesheet" href="/css/meanmenu.min.css">
  <!-- animate css -->
  <link rel="stylesheet" href="/css/animate.css">
  <!-- nivo slider css -->
  <link rel="stylesheet" href="/css/nivo-slider.css">
  <!-- owl carousel css -->
  <link rel="stylesheet" href="/css/owl.carousel.min.css">
  <!-- slick css -->
  <link rel="stylesheet" href="/css/slick.css">
  <!-- price slider css -->
  <link rel="stylesheet" href="/css/jquery-ui.min.css">
  <!-- fontawesome css -->
  <link rel="stylesheet" href="/css/font-awesome.min.css">
  <!-- fancybox css -->
  <link rel="stylesheet" href="/css/jquery.fancybox.css">
  <!-- bootstrap css -->
  <link rel="stylesheet" href="/css/bootstrap.min.css">
  <!-- default css  -->
  <link rel="stylesheet" href="/css/default.css">
  <!-- style css -->
  <link rel="stylesheet" href="../static/css/style.css">
  <!-- responsive css -->
  <link rel="stylesheet" href="/css/responsive.css">
  <link rel="stylesheet" href="/css/responsive.css">
  <link rel="stylesheet" href="/css/shortcode/header.css">
  <link rel="stylesheet" href="/css/shortcode/service.css">
  <link rel="stylesheet" href="/css/shortcode/product.css">
  <link rel="stylesheet" href="/css/shortcode/slider.css">
  <link rel="stylesheet" href="/css/shortcode/parallax.css">
  <link rel="stylesheet" href="/css/shortcode/login.css">
  <link rel="stylesheet" href="/css/shortcode/subscribe.css">
  <link rel="stylesheet" href="/css/shortcode/footer.css">
  <!-- modernizr js -->
  <script src="/js/vendor/modernizr-2.8.3.min.js"></script>
</head>

<body>

<!-- Wrapper Start -->
<div class="wrapper">
  <!-- Header Area Start -->
  <header>
    <!-- Kiosk Header Top Start -->
    <div class="kiosk-header-top">
      <div class="container">
        <div class="row">
          <!-- Header Top left Start -->
          <div class="col-lg-6 col-md-12 d-center">
            <div class="kiosk-header-top-left">
              <i class="fa fa-phone"></i>中软国际: 400-183-1066
            </div>
          </div>
          <!-- Header Top Right Start -->
          <div class="col-lg-6 col-md-12">
            <div class="kiosk-header-top-right">
              <div class="search-box-view">
                <form action="#">
                  <input type="text" class="email" placeholder="Search Your Product" name="product">
                  <button type="submit" class="submit"></button>
                </form>
              </div>
              <!-- Header-list-menu End -->
            </div>
          </div>
          <!-- Header Top Right End -->
        </div>
      </div>
      <!-- Container End -->
    </div>
    <!-- Header Top End -->
    <!-- Kiosk Header Bottom Start -->

    <div th:include="top :: topFragment"></div>
    <!-- Header Bottom End -->
  </header>
  <!-- Header Area End -->
  <!-- Breadcrumb Start -->
  <!--        中间注释-->
  <!--        <div class="breadcrumb-area ptb-60 ptb-sm-30">-->
  <!--            <div class="container">-->
  <!--                <div class="breadcrumb">-->
  <!--                    <ul>-->
  <!--                        <li><a href="index.html">Home</a></li>-->
  <!--                        <li class="active"><a href="login.html">Login</a></li>-->
  <!--                    </ul>-->
  <!--                </div>-->
  <!--            </div>-->
  <!--            &lt;!&ndash; Container End &ndash;&gt;-->
  <!--        </div>-->
  <!-- Breadcrumb End -->
  <!-- LogIn Page Start -->
  <div class="log-in ptb-70">
    <div class="container">
      <div class="row">
        <!-- New Customer Start -->
<!--        <div class="col-sm-6">-->
<!--          <div class="well">-->
<!--            <div class="kiosk-login">-->
<!--              <h3 class="mb-10">Log in to your account</h3>-->
<!--              <p class="mb-10"><strong>Welcome to your account</strong></p>-->
<!--              <form action="#">-->
<!--                <div class="form-group">-->
<!--                  <label class="control-label">Email</label>-->
<!--                  <input type="text" name="email" placeholder="Email" id="input-email" class="form-control">-->
<!--                </div>-->
<!--                <div class="form-group">-->
<!--                  <label class="control-label">Password</label>-->
<!--                  <input type="text" name="pass" placeholder="Password" id="input-password" class="form-control">-->
<!--                </div>-->
<!--                <input type="submit" value="Login" class="kiosk-login-btn">-->
<!--              </form>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
        <!-- New Customer End -->
        <!-- Login Area Start -->
        <script>
          function checkRegisterForm(){
            if ($("#f-name").val()==""){
              $("#f-nameSpan").html("账户名不能为空");
              return;
            }
            if ($("#l-name").val()==""){
              $("#l-nameSpan").html("真实姓名不能为空");
              return;
            }
            if ($("#email").val()==""){
              $("#emailSpan").html("电子邮件不能为空");
              return;
            }
            if ($("#number").val()==""){
              $("#numberSpan").html("电话号码不能为空");
              return;
            }
            if ($("#pwd").val()==""){
              $("#pwdSpan").html("密码不能为空");
              return;
            }
            if ($("#pwd-confirm").val()==""){
              $("#pwd-confirmSpan").html("请再次确认密码");
              return;
            }
            $("#registerFrom").submit();
          }
          function focusUser_Name(){
            $("#f-nameSpan").html("");
          }
          function focusRealname(){
            $("#l-nameSpan").html("");
          }
          function focusEmail(){
            $("#emailSpan").html("");
          }
          function focusNumber(){
            $("#numberSpan").html("");
          }
          function focusPwd(){
            $("#pwdSpan").html("");
          }
          function focusPwd_Confirm(){
            $("#pwd-confirmSpan").html("");
          }
        </script>
        <div class="col-sm-6">
          <div class="well">
            <div class="kiosk-login">
              <h3 class="mb-10 mtop">创建账户</h3>
              <form id="registerFrom" class="form-horizontal" action="/toRegister" method="post">
                <fieldset>
                  <legend>您的个人资料</legend>
                  <div class="form-group">
                    <label class="control-label" for="f-name"><span class="require">*</span>账户名</label>
                    <input onfocus="focusUser_Name()" type="text" class="form-control" name="user_name" id="f-name" placeholder="账户名">
                    <span id="f-nameSpan" style="color: red" th:text="${abc}"></span>
                  </div>
                  <div class="form-group">
                    <label class="control-label" for="l-name"><span class="require">*</span>真实姓名</label>
                    <input onfocus="focusRealname()" type="text" class="form-control" name="realname" id="l-name" placeholder="真实姓名">
                    <span id="l-nameSpan" style="color: red"></span>
                  </div>
                  <div class="form-group">
                    <label class="control-label" for="email"><span class="require">*</span>电子邮件</label>
                    <input onfocus="focusEmail()" type="text" class="form-control" name="email" id="email" placeholder="电子邮件">
                    <span id="emailSpan" style="color: red"></span>
                  </div>
                  <div class="form-group">
                    <label class="control-label" for="number"><span class="require">*</span>电话号码</label>
                    <input onfocus="focusNumber()" type="text" class="form-control" name="uphone" id="number" placeholder="电话号码">
                    <span id="numberSpan" style="color: red"></span>
                  </div>
                </fieldset>
                <fieldset>
                  <legend>您的账户密码</legend>
                  <div class="form-group">
                    <label class="control-label" for="pwd"><span class="require">*</span>密码:</label>
                    <input onfocus="focusPwd()" type="password" class="form-control" name="upwd" id="pwd" placeholder="密码">
                    <span id="pwdSpan" style="color: red"></span>
                  </div>
                  <div class="form-group">
                    <label class="control-label" for="pwd-confirm"><span class="require">*</span>确认密码</label>
                    <input onfocus="focusPwd_Confirm()" type="password" class="form-control" name="Nupwd" id="pwd-confirm" placeholder="确认密码">
                    <span id="pwd-confirmSpan" style="color: red" th:text="${acc}"></span>
                  </div>
                </fieldset>
                <div class="buttons kiosk-input-area">
                  <input type="button" value="提交" class="kiosk-button-field" onclick="checkRegisterForm()">
                </div>
              </form>
            </div>
          </div>
        </div>
        <!-- Login Area End -->
      </div>
      <!-- Row End -->
    </div>
    <!-- Container End -->
  </div>
  <!-- LogIn Page End -->
  <!-- newsletter Start -->
  <div th:include="lop :: topFragment"></div>
  <!-- newsletter end -->
  <!-- Footer Start -->
  <!-- Footer End -->
</div>
<!-- Wrapper End -->
<!-- jquery 3.12.4 -->
<script src="/js/vendor/jquery-1.12.4.min.js"></script>
<!-- mobile menu js  -->
<script src="/js/jquery.meanmenu.min.js"></script>
<!-- scroll-up js -->
<script src="/js/jquery.scrollUp.js"></script>
<!-- owl-carousel js -->
<script src="/js/owl.carousel.min.js"></script>
<!-- slick js -->
<script src="/js/slick.min.js"></script>
<!-- wow js -->
<script src="/js/wow.min.js"></script>
<!-- price slider js -->
<script src="/js/jquery-ui.min.js"></script>
<script src="/js/jquery.countdown.min.js"></script>
<!-- nivo slider js -->
<script src="/js/jquery.nivo.slider.js"></script>
<!-- fancybox js -->
<script src="/js/jquery.fancybox.min.js"></script>
<!-- bootstrap -->
<script src="/js/bootstrap.min.js"></script>
<!-- popper -->
<script src="/js/popper.js"></script>
<!-- plugins -->
<script src="/js/plugins.js"></script>
<!-- stellar -->
<script src="/js/jquery.stellar.min.js"></script>
<script src="/js/parallax.js"></script>
<!-- main js -->
<script src="/js/main.js"></script>
</body>
</html>
